<template>
    <rx-dialog @handOk="onOk" @cancel="onCancel">
        <a-form  layout="vertical" class="rx-a-form-vertical">
            <a-form-item :label="i18n('customDialog.pageCustomTitle','页面定制')">
                <rx-input-button v-model="customVal"
                                 @click="selectCustomView"
                >
                </rx-input-button>
            </a-form-item>

            <a-form-item :label="i18n('customDialog.callbackmethod','回调方法')">
                <a-input v-model="localConfig.callBack" ></a-input>
            </a-form-item>
            <a-form-item :label="i18n2('form.openMode','打开方式')">
                <open-mode :local-config="localConfig"></open-mode>
            </a-form-item>

            <a-form-item :label="i18n('list.paramConfig','参数配置')">
                <a-table :dataSource="localConfig.params" :pagination="false"
                         rowKey="idx_">
                    <a-table-column :title="i18n('customDialog.pageCustomParam','页面定制参数')" dataIndex="bindFieldLabel" width="150px">
                        <template slot-scope="text, record">
                            <a-form-item class="tableItems">
                                {{ record.destLabel }}
                            </a-form-item>
                        </template>
                    </a-table-column>
                    <a-table-column :title="i18n('formReport.listField','列表字段')" dataIndex="returnField" width="200px">
                        <template slot-scope="text, record">
                            <a-select @change="onSelectChange"
                                v-model="record.srcField" :options="headerFields"/>
                        </template>
                    </a-table-column>
                </a-table>
            </a-form-item>
        </a-form>
    </rx-dialog>
</template>

<script>
    import FormBoListApi from "@/api/form/core/formBoList";
    import {BaseList, Util} from "@lowcode/jpaas-common-lib";
    import CustomViewDialog from "@/views/modules/form/core/dialog/CustomViewDialog";
    import OpenMode from "@/views/modules/form/core/listCommon/OpenMode";


    /**
     * 数据结构:
     * {
     *     //别名
     *     alias: "",
     *     //名称
     *     name: "",//名称
     *     params:[ {destLabel:"目标参数显示名称",destValue:"目标参数",srcField:"来源字段"}]
     * }
     */


export default {
    name: 'FormCustomPageSetting',
    mixins: [BaseList],
    components: {
        OpenMode
    },
    props:["pkId","config", "layerid","destroy"],
    data() {
        return {
            labelCol: {span: 10},
            wrapperCol: {span: 14},
            headerFields:[],
            selectRowKeys:[],
            customVal: "",
            //配置信息
            localConfig: {
                alias: "",//报表id
                name: "",//报表名称,
                callBack:"",
                params:[],
                //窗口大小
                isMax:"YES",
                height:600,
                width:800
            }
        }
    },
    created() {
        if(this.config){
            Object.assign(this.localConfig,this.config);
            this.customVal = JSON.stringify({text: this.$i18(this.config.name), value: this.config.alias});
        }

        //加载列头信息
        this.reloadColumns();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoList",key);
        },
        i18n2(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        reloadColumns() {
            let self_ = this;
            FormBoListApi.reloadColumns(this.pkId).then(res => {
                self_.headerFields = res.data.map(function (item) {
                    item.value = item.field;
                    item.label=item.header;
                    return item
                });
            });
        },
        selectCustomView(){
            var self_=this;
            var config = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                component: CustomViewDialog,
                title: self_.i18n('customDialog.pageCustomTitle','页面定制'),
            };
            Util.open(config, function (action,data) {
                if (action != 'ok') return;
                self_.customVal = JSON.stringify({text:this.$i18(data.name), value: data.alias});
                self_.localConfig.alias=data.alias;
                self_.localConfig.name=data.name;

                self_.localConfig.params=[];

                //"label": "用户主键","value": "pkId"
                if(data.params){
                    var params=JSON.parse(data.params);
                    for (let i = 0; i < params.length; i++) {
                        let obj=params[i];
                        self_.localConfig.params.push({
                            destLabel:obj.label,
                            destValue:obj.value,

                            srcField:""
                        })
                    }
                }

            })
        },
        onSelectChange(value) {
            this.$forceUpdate();
        },
        onOk(){
            Util.closeWindow(this,'ok',this.localConfig);
        },
        onCancel(){
            Util.closeWindow(this,'cancel');
        }
    }
}
</script>
<style scoped>

</style>

